/*
 * @Author: DaQing Lu
 * @Date: 2020-02-05 16:43:40
 * @LastEditors  : DaQing Lu
 * @LastEditTime : 2020-02-11 20:28:01
 * @Description: file content
 */
import React from 'react';
import axios from 'axios';
import right1 from './iamges/img5/3.png';
import right2 from './iamges/img5/4.png';
import icon3 from './iamges/img5/2.png';
import './Explain.scss';
class Explain extends React.Component {
  state = {
    name: '',
    phone: '',
    mail: '',
  }
  nameChange = name => {
    console.log(name);
    this.setState({ name })
  };
  phoneChange = phone => {
    this.setState({ phone });
  };
  mailChange = mail => {
    this.setState({ mail });
  };
  summit = () => {
    const { name, mail, phone } = this.state;

    if (name && mail && phone) {
      // 手机号验证
      let RegCellPhone = /^(1)([0-9]{10})?$/;
      let falgPhone = phone.search(RegCellPhone);
      if (falgPhone === -1) {
        alert("请输入正确的手机号...");
        return;
      }
      // 邮箱验证
      let flagMail = mail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/);
      if (flagMail === -1) {
        alert("请输入正确的邮箱...");
        return;
      }
      // 提交表单
      axios({
        method: 'post',
        // url: 'https://store.fdimall.com/v1/marketing',
        url: 'v1/marketing.php',
        data: {
          name,
          mail,
          phone
        }
      }).then(res => {
        alert(res.data.msg);
      }).catch(err => {
        console.log(err);
      })
    } else {
      alert('请填写完整的资料...');
    }
  };
  render() {
    return (
      <div className="Explain">
        <div className="logo">
          <img src={right2} alt="图片加载失败" />
          <img src={right1} alt="图片加载失败" />
        </div>
        <div className="myFrom">
          <div className="content">
            <div className="title">
              报名函
            <img src={icon3} alt="图片加载失败" />
            </div>
            <div className="fromSubmmit">
              <input
                type="text"
                placeholder="姓名："
                onChange={e => this.nameChange(e.target.value)}
              />
              <input
                type="number"
                placeholder="电话："
                onChange={e => this.phoneChange(e.target.value)}
              />
              <input
                type="mail"
                placeholder="邮箱："
                onChange={e => this.mailChange(e.target.value)}
              />
              <button onClick={this.summit}>立即报名</button>
            </div>
            <p>咨询邮箱：wonderful@jlwdf.com</p>
          </div>
          <div className="bg"></div>
        </div>
      </div>
    )
  };
};

export default Explain;